<template>
    <!-- <page-meta :root-font-size="`${ fontValue}px`"></page-meta> -->
    <view class="container">
        <view class="bg-set"></view>
        <view style="background-color: #fff;">
            <image src="../../static/images/room.png" class="img" />
        </view>
        <view class="title">
            <view class="line"></view>
            <view class="txt">请选择餐厅</view>
        </view>
        <!-- <navigator :url="'/pages/room/room?restaurantSerials=' + item.restaurantSerials + '&restaurantName=' +item.restaurantName"  -->
        <navigator :url="Jump(item)" v-for="(item, index) in restaurantList" :key="index">
            <uni-card margin="10" padding="0">
                <view class="room">
                    <image
                        :src="!item.imgPath ? 'https://ts1.cn.mm.bing.net/th/id/R-C.0bd155829a3e3c15adb2c31d1422338b?rik=UX1UdkMV0PGvQQ&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f18%2f05%2f07%2f943db499becdacb5d049b940eb7cc466.jpg&ehk=KhC5lshhq79e9lQf2e19jGrXMLxJ2mDsRJ4m3NiPcv0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1' : ('https://api.victorick.com:8222/' + item.imgPath)"
                        class="img" />
                    <view>
                        <view style="font-weight: 700;color: black;font-size: 33rpx;">{{ item.restaurantName }}</view>
                        <view >营业时间：<i style="color: red;">{{ item.beginTime }}~{{ item.endTime }}</i></view>
                        <view>描述：{{ item.description }}</view>
                    </view>
                    <view class="status">
                        <view :class="Jumpstatus(item) == '营业中' ? 'doting' : 'dotend'">{{ Jumpstatus(item) }}</view>
                    </view>
                </view>
            </uni-card>
        </navigator>
    </view>
</template>
    
<script setup>
import { ref } from 'vue'
import { http } from '../../utils/http';
import { onShow } from '@dcloudio/uni-app';
import { useMemberStore } from '../../stores';
const store = useMemberStore()
const restaurantList = ref([])
const restime=ref()
const endTime1=ref('')

onShow(() => {
    getRestaurant()
})
// 获取餐厅数据
const getRestaurant = async () => {
    const res = await http({
        url: '/GetRestaurant',
        method: 'post',
        data: store.requestData
    })
   
    restaurantList.value = res.data
    restime.value=res.restime
    endTime1.value=res.restime.split(' ')[0]+' '+res.data[0].endTime
}
const Jump = (item) => {
    const data = '/pages/room/room?restaurantSerials=' + item.restaurantSerials + '&restaurantName=' + item.restaurantName +'&endTime='+endTime1.value
    const time = new Date(restime.value)//--------------------hsq修改
    // const time=new Date()
    const su = item.endTime.split(':')
    const zao = item.beginTime.split(':')
    if (time.getHours() > su[0] || time.getHours() < zao[0]) {
        return
    } else if (time.getHours() == su[0] || time.getHours() == zao[0]) {
        if ((time.getMinutes() >= su[1] && time.getHours() == su[0]) || (time.getMinutes() <= zao[1] && time.getHours() == zao[0]&&time.getSeconds()<=zao[2])) {
            return
        }
    }
    return data
}
const Jumpstatus = (item) => {
    console.log(item);
    const time = new Date(restime.value)//--------------------hsq修改
    // const time=new Date()
    const su = item.endTime.split(':')
    const zao = item.beginTime.split(':')
    if (time.getHours() > su[0] || time.getHours() < zao[0]) {
        return '休息中'
    } else if (time.getHours() == su[0] || time.getHours() == zao[0]) {
        if ((time.getMinutes() >= su[1] && time.getHours() == su[0]) || (time.getMinutes() <= zao[1] && time.getHours() == zao[0]&&time.getSeconds()<=zao[2])) {
            return '休息中'
        }
    } 

    return '营业中'
}


</script>
    
<style lang="scss" scoped>
.img {
    width: 100%;
    height: 280rpx;
}

.bg-set {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f1f1f1;
    z-index: -1;
}

.room {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx;

    .img {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
    }

    .status {
        width: 200rpx;
        font-size: 30rpx;
        text-align: center;

        .doting {
            color: #4ccc89;
        }

        .dotend {
            color: red;
        }

    }
}

.title {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #fff;
    margin-top: 20rpx;

    .line {
        width: 13rpx;
        height: 70rpx;
        background-color: #007aff;
        border-radius: 50rpx;
        margin-left: 10rpx;
    }

    .txt {
        font-size: 35rpx;
        font-weight: 700;
        margin-left: 20rpx;
    }
}
</style>